<template>
<div class="payment-input-wrapper">
  <div class="label font-28 mb-18 textColor2">
    {{ $t(label) }}
  </div>
  <div class="payment-input w-full" >
    <slot>
      <input v-if="!isTextArea"
          :readonly="disabled"
          class="w-full h-full inputBackground c2cColor"
          type="text"
          :value="$t(value)"
          @input="changeValue"
          :placeholder="$t(placeholder)"
      >
      <textarea  v-else
          class="w-full h-full inputBackground c2cColor"
          type="text"
          :value="$t(value)"
          @input="changeValue"
          :placeholder="$t(placeholder)"
          cols="30" rows="6"
       ></textarea>
    </slot>
  </div>
</div>
</template>

<script>
export default {
  name: "PaymentInput",
  // props: ["label", "color", "value"]
  props: {
    label: {
      redirect: true
    },
    color: {
      default: "#000000"
    },
    value: {

    },
    placeholder: {
      default: ""
    },
    disabled: {
      default() {
        return false
      }
    },
    isTextArea:{
      default:false
    }
  },
  methods: {
    changeValue(e) {
      this.$emit("input", e.target.value)
    }
  }
}
</script>

<style lang="scss" scoped>
input, textarea {
  box-sizing: border-box;
  padding: 32px 24px;
  border: none;
  border-radius: 8px;
}

textarea {
  resize: none;
}
</style>